<!DOCTYPE html>
<html>

<head>
    <title>大屏展示设计器</title>
    <#include "base/pageheader.ftl" />

    <link type="text/css" rel="stylesheet" href="${request.contextPath}/static/libs/gridstack/css/gridstack.css" />
    <link id="theme-css" rel="stylesheet" type="text/css" href="">
    <style type="text/css">
        html {
            background-color: rgb(10, 6, 27);
            color: #333;
        }

        body {
            padding-bottom: 0px;
            -webkit-transition: margin 500ms ease;
            -moz-transition: margin 500ms ease;
            -ms-transition: margin 500ms ease;
            -o-transition: margin 500ms ease;
            transition: margin 500ms ease;
            color: #333;
        }

        .grid-stack-item-content {
            border-radius: 4px;
            background-color: white;
        }

        .grid-stack > .grid-stack-item > .grid-stack-item-content{
            border: 1px solid #ddd;
        }


        .layui-nav {
            background-color: white;
            border-bottom: 1px solid #f6f6f6;
        }

        .grid-stack-item-body:before{
            width: 100%;
            height: 100%;
            display: table;
            content: "";
            clear: both;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            display: block;
            z-index: 1001;
            overflow: hidden;
        }
        .grid-stack-item-body{
            position: relative;
            overflow-y: visible
        }


        .grid-stack-item-body iframe {
            display: block;
            border-width: 0;
            border-style: solid;
            border-color: #e6e6e6;
        }
    </style>

</head>

<body class="bg01">
    <!--隐藏域-->
    <div class="layui-hide">
        <div class="layui-input-block">
            <input type="hidden" name="RWID" id="largescreen-rwid" autocomplete="off" value="${largescreen.RWID}" />
            <input type="hidden" name="OBJNAME" id="largescreen-objname" autocomplete="off" value="${largescreen.OBJNAME}"/>
            <input type="hidden" name="theme" id="largescreen-theme" autocomplete="off" />
        </div>
    </div>
    <div id="formTreeContainer" class="zl-container" style=" overflow: auto;display: none;">
        <ul id="formDesignTree" class="ztree" style="height: 96%; ">
            <div class="layui-none">
                <div class="empty-data"
                    style="text-align:center;padding-top: 10%;color: #ccc;font-family: tahoma ,微软雅黑;">
                    <i class="layui-icon layui-icon-search" style="font-size: 100px;"></i>
                    <div class="no-data" style="padding-top: 10px;font-size: 25px;">无数据</div>
                </div>
            </div>
        </ul>
    </div>
    <div class="container-fluid">
        <div class="row-fluid">
            <div>
                <div class="design-header">
                    <!-- 头部区域（可配合layui已有的水平导航） -->
                    <div class="layui-nav" style="padding:5px;">
                        <button class="layui-btn layui-btn-sm" id="btn-add"><i
                                class="icon-eye-open icon-white"></i>添加</button>
                        <button class="layui-btn layui-btn-sm" id="btn-save"><i
                                class="icon-trash icon-white"></i>保存</button>
                        <button class="layui-btn layui-btn-sm" id="btn-preview"><i
                                class="icon-eye-open icon-white"></i>预览</button>
                        <button class="layui-btn layui-btn-sm" id="btn-clear"><i
                                class="icon-trash icon-white"></i>清空</button>
                        <button class="layui-btn layui-btn-sm" id="bigScreentheme"><i
                            class="icon-trash icon-white"></i>大屏主题</button>
                    </div>
                </div>
                <div class="grid-stack">
                </div>
                <div style="height: 40px;"></div>
            </div>
        </div>
    </div>

    <!-- 配置大屏主题 -->
    <div class="configTheme" id="configTheme" style="padding:20px;display: none">
        <form class="layui-form" id="config-theme-form" lay-filter="config-theme-form">
            <div class="layui-form-item set-formula-attr">
                <label class="layui-form-label">大屏主题</label>
                <div class="layui-input-block">
                    <select name="themeConfig" name="themeConfig" lay-filter="">
                        <option value="">请选择主题</option>
                        <option value="chalk">蓝色</option>
                        <option value="dark">黑暗</option>
                    </select>
                </div>
                <button id="config-theme-form-btn" class="layui-hide" type="button" lay-submit
                    lay-filter="config-theme-form-btn">提交</button>
            </div>
        </form>
    </div>

    <#include "base/pagefoot.ftl" />
    <!-- <script type="text/javascript" src="${request.contextPath}/static/libs/gridstack/js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="${request.contextPath}/static/libs/gridstack/js/lodash.min.js"></script>
    <script type="text/javascript" src="${request.contextPath}/static/libs/gridstack/js/gridstack.js"></script>
    <script type="text/javascript" src="${request.contextPath}/static/libs/gridstack/js/gridstack.jQueryUI.js"></script> -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
    <script type="text/javascript" src="${request.contextPath}/static/libs/gridstack/js/lodash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js"></script>
    <script type="text/javascript" src="${request.contextPath}/static/libs/gridstack/js/gridstack.js"></script>
    <script type="text/javascript" src="${request.contextPath}/static/libs/gridstack/js/gridstack.jQueryUI.js"></script>

    <script>
        layui.config({
            base: '${request.contextPath}/static/framework/'
            , contentPath: '${request.contextPath}'
        })
    </script>
    <script type="text/javascript"
        src="${request.contextPath}/static/modules/manager/corelargescreen/largescreen_design.js?v=<@configVersion suosxt='CORE'> </@configVersion>"></script>
</body>

</html>